<template>
  <div class="online_class">
    <div class="roter_view">
      <div class="regulations">
        <div class="regulations_title">
          <p style="margin-right: 20px">共同条令</p>
        </div>
        <div class="regulations_section">
          <div
            class="regulations_section_book"
            v-for="(item, index) in classRoomList"
            :key="index"
            @click="handelImg(item.id)"
          >
            <img :src="item.url ? item.url : ''" alt="" />
            <p>{{ item.label }}</p>
          </div>
        </div>
        <div class="regulations_pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="roomVal.page"
            :page-size="roomVal.size"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getClassRoomList } from "@/api/classRoom";
export default {
  name: "index",
  props: ["roomData"],
  watch: {
    roomData: function (val) {
      let _this = this;
      if (val === "全部") {
        _this.roomVal.data.type = "";
      } else {
        _this.roomVal.data.type = val;
      }
      _this.getClassRoomList(_this.roomVal);
    },
  },
  data() {
    return {
      routerName: "",
      roomVal: {
        page: 1,
        size: 10,
        data: {
          type: "",
          keyword: "",
        },
      },
      total: 0,
      classRoomList: [],
    };
  },
  created() {
    this.routerName = this.$route.query.routerName;
    if (this.$route.query.type === "全部") {
      this.roomVal.data.type = "";
    } else {
      this.roomVal.data.type = this.$route.query.type;
    }
  },
  mounted() {
    this.getClassRoomList(this.roomVal);
  },
  methods: {
    getClassRoomList(data) {
      getClassRoomList(data).then((response) => {
        if (response.data.code === 20000) {
          const { list, totalRecords } = response.data.results;
          this.total = totalRecords;
          this.classRoomList = list.map((item) => {
            return {
              id: item.id,
              label: item.title,
              url: item.url ? item.url : "",
            };
          });
        }
      });
    },

    handleCurrentChange(val) {
      this.roomVal.page = val;
      this.getClassRoomList(this.roomVal);
    },
    handelImg(id) {
      this.$router.push({
        path: "/onlineClass/regulations",
        query: {
          routerName: "在线课堂详情",
          classRoomId: id,
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.online_class {
  width: 1280px;
  margin: 0 auto;

  .roter_view {
    width: 1060px;
    .regulations {
      color: #333;
      .regulations_title {
        height: 40px;
        background: #f1f1f1;
        text-align: right;
        line-height: 40px;
        font-weight: bold;
        font-size: 21px;
        color: #0a7b19;
      }
      .regulations_section {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 20px;
        .regulations_section_book {
          width: 250px;
          height: 180px;
          margin-right: 20px;
          margin-bottom: 20px;
          cursor: pointer;
          &:nth-child(4n) {
            margin: 0;
          }
          img {
            width: 250px;
            height: 150px;
          }
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
      .regulations_pagination {
        width: 900px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-bottom: 50px;
        .regulations_pagination_button {
          width: 86px;
          height: 38px;
          line-height: 38px;
          border: 1px solid #0a7b19;
          border-radius: 8px;
          color: #0a7b19;
          font-weight: bold;
          text-align: center;
          transition: all 0.2s linear;
          cursor: pointer;
          &:hover {
            background-color: #0a7b19;
            color: white;
          }
        }
      }
    }
  }
}
</style>
